<template>
    <div class="archive">
        <el-container :style="'min-height:' + minHeight">
            <el-aside class="me-area">
                <el-scrollbar class='scrollbar'>
                    <ul class="me-month-list">
                        <li v-for="(item, index) in archives" :key="index" class="me-month-item">
                            <el-badge :value="item.count">
                                <nuxt-link
                                    :to="{ path: '/archives', query: { y: item.year, m: item.month } }"
                                    class="cate-link" 
                                    active-class="current" 
                                    exact
                                >
                                    <span>{{ item.year + '年' + item.month+ '月'}}</span>
                                </nuxt-link>
                            </el-badge>
                        </li>
                    </ul>
                </el-scrollbar>
            </el-aside>

            <el-main class="me-articles">
                <div class="me-month-title">{{ currentArchive }}</div>
                <article-scroll-page v-bind="params"></article-scroll-page>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import ArticleScrollPage from '@/components/ArticleScrollPage'

export default {
    name: 'CateDom',
    components: {
        ArticleScrollPage
    },
    data() {
        return {
            params: {
                query: {
                    month: this.$route.query.m,
                    year: this.$route.query.y
                }
            },
            archives: [],
            minHeight: 0,
        }
    },
    computed: {
        title() {
            return this.currentArchive + ' - 文章归档 - For Fun'
        },
        currentArchive() {
            if (this.params.query.year && this.params.query.month) {
                return `${this.params.query.year}年${this.params.query.month}月`
            }
            return '全部'
        }
    },
    watch: {
        '$route'() {
            if (this.$route.query.y && this.$route.query.m) {
                this.params.query.year = this.$route.query.y
                this.params.query.month = this.$route.query.m
            }
        }
    },
    mounted() {
        this.listArchives()
        this.minHeight = "620px";
    },
    methods: {
        
        listArchives() {
            this.$Api.getArchive().then((res => {
                this.archives = res.data;
            })).catch(() => {
                this.$message({ type: 'error', message: '文章归档加载失败!', showClose: true })
            })
        }
    }
}
</script>
<style lang="less" scoped>
.archive {

    .el-aside {
        padding: 20px 0;
        margin: 20px 0;
        background-color: #ffff;
        position: fixed;
        width: 245px !important;

        .scrollbar {
            height: 500px;
            :deep(.el-scrollbar__wrap) {
                overflow-x: hidden !important;
            }
            .me-month-list {
                margin-top: 10px;
                margin-bottom: 10px;
                text-align: center;
                list-style-type: none;
                display: flex;
                flex-wrap: wrap;

                .me-month-item {
                    margin-top: 18px;
                    padding: 4px;
                    font-size: 14px;
                    color: #5FB878;
                    margin-right: 15px;
                    width: 40%;

                    .cate-link {
                        &.current {
                            color: #6bc30d;
                            font-weight: 600;
                            background: linear-gradient(90deg, #2db7f5, #6bc30d);
                            -webkit-background-clip: text;
                            color: transparent;
                        }
                    }

                }

            }

        }

    }

    .el-main {
        margin-left: 20%;

        .me-month-title {
            margin-left: 4px;
            margin-bottom: 12px;
        }

    }

}

</style>